<script setup>
import { computed, onMounted, ref, unref, watch, watchEffect } from "vue";
import { sleep } from "wsp-toolkit";
import Audio from "../components/Audio.vue";
import { useRouter } from "vue-router";

function emptyFn() {}
class Meter {
  constructor({ count = 0, onOne = emptyFn, onAll = emptyFn } = {}) {
    this.isComplate = false;
    this.count = count || 0;
    this.completeCount = 0;
    this.onOne = onOne || emptyFn;
    this.onAll = onAll || emptyFn;
  }

  setCount(count) {
    this.count = count;
    return this;
  }

  done(arg) {
    if (this.isComplate) return;
    this.completeCount += 1;
    if (this.completeCount < this.count) {
      this.onOne(arg);
      return;
    }
    this.isComplate = true;
    this.onAll(arg);
  }
}
const meter = new Meter({
  onOne() {
    // console.log(this.completeCount);
  },
  onAll() {
    // console.log(this);
  },
});
const router = useRouter();

function genArr(fn) {
  return Array.from({ length: 8 }).reduce((res, x, i) => {
    res[`p${i + 1}`] = fn ? fn(i + 1) : 0;
    return res;
  }, {});
}
const showPage = ref(0);
const refAudio = ref();
const step = ref(genArr());
const animeUnit = genArr((i) => {
  return [{}, 2, 3, 4, 3, 3][i];
});
const doorStep = ref(0);
const animedCount = ref(genArr());

function getPageStep(pageIndex) {
  return unref(step)[`p${pageIndex}`];
}

function ge(pageIndex, stp) {
  return getPageStep(pageIndex) >= stp;
}

function eq(pageIndex, stp) {
  return getPageStep(pageIndex) === stp;
}

function changeStep(pageIndex, stp) {
  step.value[`p${pageIndex}`] = stp;
}

function pageAnimationend(pageIndex) {
  const k = `p${pageIndex}`;
  animedCount.value[k] += 1;
  if (unref(animedCount)[k] !== animeUnit[k]) {
    return;
  }
  if (eq(pageIndex, 3)) {
    changeStep(pageIndex, 3);
  }
  changeStep(pageIndex, 2);
}

async function nextPage(currentPage) {
  loadImg(currentPage + 2);
  if ([6, 7].includes(currentPage)) {
    showPage.value += 1;
    return;
  }
  changeStep(currentPage, getPageStep(currentPage) + 1);
  await sleep(1000);
  showPage.value += 1;
}

const pageOffset = computed(() => {
  return unref(showPage) * 100;
});

function toPage() {
  location.replace(
    "https://20919269-242.hd.webportal.top/20919269/WOQgG3rUVscCLIrorYIciQ/load-20919269-242.html?style=123&editQrcode=true&_source=1",
  );
}
onMounted(() => {
  const allImg = document.querySelectorAll("img");
  meter.setCount(allImg.length);
  allImg.forEach((imgEl) => {
    imgEl.onload = () => {
      meter.done();
    };
  });
});
watch(showPage, (val) => {
  const crtPage = val + 1;
  if (crtPage === 7) {
    sleep(1000).then(async () => {
      doorStep.value += 1;
      await sleep(500);
      doorStep.value += 1;
      await sleep(500);
      doorStep.value += 1;
      await sleep(500);
      doorStep.value += 4;
      await sleep(1000);
      changeStep(7, 2);
    });
    return;
  }
  setTimeout(() => {
    if (getPageStep(crtPage) < 2) {
      changeStep(crtPage, 2);
    }
    // 3s 后，如果还未显示箭头，则显示
  }, 3000);
  sleep(500).then(() => {
    changeStep(crtPage, 1);
  });
});
function loadImg(pageIndex) {
  document.querySelectorAll(`.page${pageIndex} img`).forEach((img) => {
    img.src = img.dataset.src;
  });
}
onMounted(() => {
  loadImg(1);
  sleep(500).then(() => {
    changeStep(1, 1);
  });
  sleep(1000).then(() => {
    loadImg(2);
  });
});
</script>

<template>
  <div class="main">
    <Audio ref="refAudio" />
    <div class="pages" :style="`--page: -${pageOffset}%`">
      <div class="page page1">
        <div class="skipBtn" @click="toPage">跳过</div>

        <img
          :class="['bg', { bgScale: ge(1, 1) }]"
          data-src="/page1/bg.jpg"
          alt=""
          @load="meter.done"
        />
        <img
          data-src="/page1/t1.png"
          :class="['page1_t1', { page1_t1_end: ge(1, 1), p1_t1_2: ge(1, 3) }]"
          @transitionend="pageAnimationend(1)"
        />
        <img
          data-src="/page1/t2.png"
          :class="['page1_t2', { page1_t2_end: ge(1, 1), p1_t2_2: ge(1, 3) }]"
          @transitionend="pageAnimationend(1)"
        />
        <div
          :class="['arrowBox', { show: ge(1, 2) }]"
          @click="
            () => {
              nextPage(1);
              refAudio.play();
            }
          "
        >
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page2">
        <img
          :class="['bg', { bgScale: ge(2, 1) }]"
          data-src="/page2/bg.jpg"
          alt=""
        />
        <img
          data-src="/page2/t3.png"
          :class="['p2t3a', { p2t3b: ge(2, 1), p2t3c: ge(2, 3) }]"
          @transitionend="pageAnimationend(2)"
        />
        <img
          data-src="/page2/t2.png"
          :class="['p2t2a', { p2t2b: ge(2, 1), p2t2c: ge(2, 3) }]"
          @transitionend="pageAnimationend(2)"
        />
        <img
          data-src="/page2/t1.png"
          :class="['p2t1a', { p2t1b: ge(2, 1), p2t1c: ge(2, 3) }]"
          @transitionend="pageAnimationend(2)"
        />

        <div :class="['arrowBox', { show: ge(2, 2) }]" @click="nextPage(2)">
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page3">
        <img
          :class="['bg', { bgScale: ge(3, 1) }]"
          data-src="/page3/bg.jpg"
          alt=""
        />
        <img
          v-for="(x, i) of [0, 0, 0, 0]"
          :key="i"
          :data-src="`/page3/t${i + 1}.png`"
          :class="[
            `t${i + 1}a`,
            { [`t${i + 1}b`]: ge(3, 1), [`t${i + 1}c`]: ge(3, 3) },
          ]"
          @transitionend="pageAnimationend(3)"
        />

        <div :class="['arrowBox', { show: ge(3, 2) }]" @click="nextPage(3)">
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page4">
        <img
          :class="['bg', { bgScale: ge(4, 1) }]"
          data-src="/page4/bg.jpg"
          alt=""
        />
        <img
          data-src="/page4/t1.png"
          :class="['t1a', { t1b: ge(4, 1), t1c: ge(4, 3) }]"
          @transitionend="pageAnimationend(4)"
        />
        <img
          data-src="/page4/t2.png"
          :class="['t2a', { t2b: ge(4, 1), t2c: ge(4, 3) }]"
          @transitionend="pageAnimationend(4)"
        />
        <img
          data-src="/page4/t3.png"
          :class="['t3a', { t3b: ge(4, 1), t3c: ge(4, 3) }]"
          @transitionend="pageAnimationend(4)"
        />

        <div :class="['arrowBox', { show: ge(4, 2) }]" @click="nextPage(4)">
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page5">
        <img
          :class="['bg', { bgScale: ge(5, 1) }]"
          data-src="/page5/bg.jpg"
          alt=""
        />
        <img
          data-src="/page5/t1.png"
          :class="['t1a', { t1b: ge(5, 1), t1c: ge(5, 3) }]"
          @transitionend="pageAnimationend(5)"
        />
        <img
          data-src="/page5/t2.png"
          :class="['t2a', { t2b: ge(5, 1), t2c: ge(5, 3) }]"
          @transitionend="pageAnimationend(5)"
        />
        <img
          data-src="/page5/t3.png"
          :class="['t3a', { t3b: ge(5, 1), t3c: ge(5, 3) }]"
          @transitionend="pageAnimationend(5)"
        />

        <div :class="['arrowBox', { show: ge(5, 2) }]" @click="nextPage(5)">
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page6">
        <img
          :class="['bg', { bgScale: ge(6, 1) }]"
          data-src="/page6/bg.jpg"
          alt=""
        />
        <img
          data-src="/page6/t1.png"
          :class="['t1a', { t1b: ge(6, 1), t1c: ge(6, 3) }]"
        />
        <img
          data-src="/page6/t2.png"
          :class="['t2a', { t2b: ge(6, 1), t2c: ge(6, 3) }]"
        />
        <img
          @click.prevent="nextPage(6)"
          data-src="/page6/t3.png"
          :class="['t3a', { t3b: ge(6, 1), t3c: ge(6, 3) }]"
        />
      </div>

      <div class="page page7">
        <img
          :class="['bg', { bgScale: doorStep >= 4 }]"
          data-src="/page7/bg.jpg"
          alt=""
        />
        <img
          :class="['t1', { bgScale: doorStep >= 4 }]"
          data-src="/page7/t1.png"
        />

        <img
          data-src="/page7/f3.png"
          :class="['f', { hiddenAnime: doorStep >= 3 }]"
        />
        <img
          data-src="/page7/f2.png"
          :class="['f', { hiddenAnime: doorStep >= 2 }]"
        />
        <img
          data-src="/page7/f1.png"
          :class="['f f1', { hiddenAnime: doorStep >= 1 }]"
        />

        <div :class="['arrowBox', { show: ge(7, 2) }]" @click="nextPage(7)">
          <img data-src="/arr.png" alt="" class="arrow" />
        </div>
      </div>

      <div class="page page8">
        <img class="bg" data-src="/page8/bg.jpg" alt="" />
        <img class="bg" data-src="/page8/bg2.png" alt="" />
        <img
          data-src="/page8/t1.png"
          :class="['t1a', { t1b: ge(8, 1), t1c: ge(8, 3) }]"
        />

        <img
          data-src="/page8/t3.png"
          :class="['t3a', { t3b: ge(8, 1), t3c: ge(8, 3) }]"
        />
        <img
          style="pointer-events: auto"
          @click="toPage"
          data-src="/page8/t2.png"
          :class="['t2a', { t2b: ge(8, 1), t2c: ge(8, 3) }]"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
img {
  transition: all 2s;
  object-fit: cover;
  max-width: 100%;
}

.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: content;
}

.pages {
  height: 100%;
  width: 100%;
  transform: translateY(var(--page));
  transition: all 1s;

  * {
    pointer-events: none;
  }
}

.page {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  contain: content;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: -2;
  transition: all 4s;
}

.arrowBox {
  display: flex;
  position: absolute;
  height: 44px;
  width: 100%;
  bottom: 7%;
  left: 0;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transition: all 0.5s;

  &.show {
    opacity: 1;
    pointer-events: auto;
  }
}

.arrow {
  height: 44px;
  animation: 1s moveY infinite alternate;
}
.bgScale {
  transform: scale(1.1);
}

@keyframes moveY {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(10px);
  }
}
.page1 {
  .bg {
    transition: all 5s;
  }

  .bgScale {
    transform: scale(1.2);
  }
}
.page1_t1 {
  height: 24px;
  opacity: 0;
  transform: translate(13vw, 0);
}

.page1_t1_end {
  opacity: 1;
  transform: translate(15vw, 23vh);
}

.p1_t1_2 {
  opacity: 1;
  transform: translate(-100vw, 23vh);
}

.page1_t2 {
  height: 24px;
  opacity: 0;
  transform: translate(15vw, 50vh);
}

.page1_t2_end {
  opacity: 1;
  transform: translate(15vw, 25vh);
}

.p1_t2_2 {
  transform: translate(100vw, 25vh);
}

.page2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  .bgScale {
    transform: scale(1.3);
  }
}

.p2t1a,
.p2t2a,
.p2t3a {
  opacity: 0;
  height: 24px;
}

.p2t1a {
  transform: translateY(102.5vh);
}

.p2t1b {
  opacity: 1;
  transform: translateY(82.5vh);
}

.p2t1c {
  transform: translate(-110vw, 82.5vh);
}

.p2t2a {
  transform: translateY(111.5vh);
}

.p2t2b {
  opacity: 1;
  transform: translateY(81.5vh);
}

.p2t2c {
  transform: translate(100vw, 81.5vh);
}

.p2t3a {
  transform: translateY(112.5vh);
}

.p2t3b {
  opacity: 1;
  transform: translateY(80vh);
}

.p2t3c {
  transform: translate(-100vw, 80vh);
}

.page3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10vh;

  .t1a,
  .t2a,
  .t3a,
  .t4a {
    opacity: 0;
  }
  .t1a {
    height: 24px;
    transform: translate(-100vw, 0);
  }
  .t2a {
    height: 10vh;
    margin-top: 24px;
    transform: translate(100vw, 0);
  }
  .t3a {
    height: 23px;
    margin-top: 16px;
    transform: translate(-100vw, 0);
  }
  .t4a {
    transform: translate(0, 20vh);
  }
  .t1a {
    height: 24px;
    transform: translate(-100vw, 0);
  }
  .t2a {
    height: 10vh;
    margin-top: 24px;
    transform: translate(100vw, 0);
  }
  .t3a {
    height: 23px;
    margin-top: 16px;
    transform: translate(-100vw, 0);
  }
  .t4a {
    height: 55px;
    position: absolute;
    bottom: 10vh;
    transform: translate(0, 20vh);
  }
  .t1b,
  .t2b,
  .t3b,
  .t4b {
    opacity: 1;
    transform: translate(0);
  }
  .t1c {
    transform: translate(100vw, 0);
  }
  .t2c {
    transform: translate(-100vw, 0);
  }
  .t3c {
    transform: translate(100vw, 0);
  }
  .t4c {
    transform: translate(0) scale(0);
  }
}

.page4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  .bgScale {
    transform: scale(1.5);
  }
  .t1a,
  .t2a,
  .t3a {
    opacity: 0;
  }

  .t1a {
    height: 68px;
    transform: translateY(-10vh);
  }

  .t1b {
    opacity: 1;
    transform: translateY(12vh);
  }

  .t1c {
    transform: translate(-110vw, 12vh);
  }

  .t2a {
    height: 22px;
    transform: translateY(-15vh);
  }

  .t2b {
    opacity: 1;
    transform: translateY(14vh);
  }

  .t2c {
    transform: translate(100vw, 14vh);
  }

  .t3a {
    height: 50px;
    transform: translateY(112.5vh);
  }

  .t3b {
    opacity: 1;
    transform: translateY(65vh);
  }

  .t3c {
    transform: translate(-100vw, 65vh);
  }
}

.page5 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .t1a,
  .t2a,
  .t3a {
    opacity: 0;
  }

  .t1a {
    position: absolute;
    left: 0;
    height: 68px;
    transform: translateY(-10vh);
  }

  .t1b {
    opacity: 1;
    transform: translate(10vw, 30vh);
  }

  .t1c {
    transform: translate(-110vw, 30vh);
  }

  .t2a {
    position: absolute;
    left: 0;
    height: 50px;
    transform: translateY(-15vh);
  }

  .t2b {
    opacity: 1;
    transform: translate(10vw, 42vh);
  }

  .t2c {
    transform: translate(100vw, 42vh);
  }

  .t3a {
    height: 50px;
    transform: translateY(100vh);
  }

  .t3b {
    opacity: 1;
    transform: translateY(76vh);
  }

  .t3c {
    transform: translate(-100vw, 76vh);
  }
}

.page6 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .t1a,
  .t2a,
  .t3a {
    opacity: 0;
  }

  .t1a {
    height: 100px;
    transform: translateY(-10vh);
  }

  .t1b {
    opacity: 1;
    transform: translateY(24vh);
  }

  .t1c {
  }

  .t2a {
    height: 24px;
    transform: translateY(100vh);
  }

  .t2b {
    opacity: 1;
    transform: translateY(58vh);
  }

  .t2c {
  }

  .t3a {
    height: 120px;
    transform: translateY(36vh) scale(0);
    pointer-events: auto;
  }

  .t3b {
    opacity: 1;
    animation: 1s scaleAnime infinite alternate;
    transform: translateY(36vh) scale(0.9);
  }

  .t3c {
  }
}
@keyframes scaleAnime {
  from {
    transform: translateY(36vh) scale(0.9);
  }
  to {
    transform: translateY(36vh) scale(1.1);
  }
}
.page7 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .t1 {
    width: 100%;
    height: 100%;
  }

  .f {
    opacity: 1;
    transition: all 0.3s;
  }

  .hiddenAnime {
    opacity: 0;
  }

  .f {
    position: absolute;
    height: 99%;
    bottom: 0;
    left: 3%;
    width: auto;
  }
}

.page8 {
  display: flex;
  flex-direction: column;
  align-items: center;

  .t1a,
  .t2a,
  .t3a {
    opacity: 0;
  }

  .t1a {
    width: 90%;
    transform: translate(-3vw, -10vh);
  }

  .t1b {
    opacity: 1;
    transform: translate(-3vw, 31vh);
  }

  .t1c {
    transform: translate(-110vw, 12vh);
  }

  .t2a {
    height: 36px;
    transform: translateY(-15vh);
  }

  .t2b {
    opacity: 1;
    transform: translateY(32vh);
    animation: rotateEnter 2s 2s infinite alternate;
  }

  .t2c {
    transform: translate(100vw, 14vh);
  }

  .t3a {
    position: absolute;
    height: auto;
    width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
  }

  .t3b {
    opacity: 1;
  }

  .t3c {
    transform: translate(-100vw, 65vh);
  }
}

@keyframes rotateEnter {
  0%,
  100% {
    transform: translateY(32vh) rotate(0deg); /* 初始状态，不旋转 */
  }
  12% {
    transform: translateY(32vh) rotate(-5deg); /* 向左旋转5度 */
  }
  24% {
    transform: translateY(32vh) rotate(5deg); /* 向右旋转5度 */
  }
  36% {
    transform: translateY(32vh) rotate(-5deg); /* 再次向左旋转5度 */
  }
  50% {
    transform: translateY(32vh) rotate(0deg);
  }
}

.skipBtn {
  position: absolute;
  pointer-events: auto;
  z-index: 2;
  top: 28px;
  left: 20px;
  background: #ffffff80;
  color: #976339;
  border-radius: 16px;
  font-size: 12px;
  min-width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
</style>
